<template>
 <el-dialog
  :title="DialogType==0?'新增医生信息':'修改编辑'"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <span>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name" >
    <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
  </el-form-item>
  <el-form-item label="上传照片" prop="name">
    <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon" style="
    line-height:3.5"></i>
    <p>点击上传</p>
</el-upload>
  </el-form-item>
   <el-form-item label="所属院区" prop="school">
    <el-select v-model="ruleForm.school" placeholder="请选择院区" style="
    width: 360px">
      <el-option label="西院区" value="西院区"></el-option>
      <el-option label="东院区" value="东院区"></el-option>
    </el-select>
  </el-form-item>
 
   <el-form-item label="所属科室" prop="ks">
    <el-select v-model="ruleForm.ks" placeholder="请选择科室" style="
    width: 360px">
      <el-option label="内科-肾内科" value="内科-肾内科"></el-option>
      <el-option label="外科-神经科" value="外科-神经科"></el-option>
    </el-select>
  </el-form-item>
 
   <el-form-item label="医生职称" prop="zc">
    <el-select v-model="ruleForm.zc" placeholder="请选择医生职称" style="
    width: 360px">
      <el-option label="主任医师" value="主任医师"></el-option>
      <el-option label="副主任医师" value="副主任医师"></el-option>
      <el-option label="主治医师" value="主治医师"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="医生标签" prop="bq">
    <el-select v-model="ruleForm.bq" placeholder="请选择标签" style="
    width: 360px">
     
      <el-option label="功能" value="功能">
         <el-checkbox label="肾功能" name="type"></el-checkbox>
      </el-option>
      <el-option label="肾功能" value="肾功能">
         <el-checkbox label="肾功能" name="type"></el-checkbox>
      </el-option>
      <el-option label="心脑血管" value="心脑血管">
         <el-checkbox label="心脑血管功能" name="type"></el-checkbox>
      </el-option>
      <el-option label="肝功能" value="肝功能">
         <el-checkbox label="肝功能" name="type"></el-checkbox>
      </el-option>
      <el-option label="心脏病" value="心脑血管">
        <el-checkbox label="心脏病" name="type"></el-checkbox>
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="挂号费" prop="gh" >
    <el-input v-model="ruleForm.gh" placeholder="60.00"></el-input>
  </el-form-item>
  <el-form-item label="诊查费" prop="zcf" >
    <el-input v-model="ruleForm.zcf" placeholder="0.00"></el-input>
  </el-form-item>
   <el-form-item label="医生简介" prop="desc" >
    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入内容"></el-input>
  </el-form-item>
   <el-form-item label="医生状态" prop="delivery" >
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="saveDiaog">保存</el-button>
  </span>
</el-dialog>
</template>

<script>
import {xiugaiFn} from "../../../api/home1"
 export default {
   props:['DialogRow','DialogType'],
   data(){
     return {
        ruleForm:{
          id:new Date().getTime(),
          name:'',
          school:"",
          ks:'',
          zc:'',
          bq:'',
          type: [],
         gh:'',
         zcf:'',
         desc:'',
         delivery:''
        },
        rules:{
          name:[
             { required: true, message: '请输入内容', trigger: 'blur' },
          ],
            school:[
            { required: true, message: '请选择院校', trigger: 'change' }
          ],
           ks:[
            { required: true, message: '请选择院校', trigger: 'change' }
          ],
           zc:[
            { required: true, message: '请选择院校', trigger: 'change' }
          ],
           bq:[
            { required: false, message: '请选择院校', trigger: 'change' }
          ],
           gh:[
            { required:true, message: '请选择院校', trigger: 'change' }
          ],
           zcf:[
            { required:true, message: '请选择院校', trigger: 'change' }
          ],
           desc:[
            { required:false, message: '请输入内容', trigger: 'change' }
          ],
           delivery:[
            { required:false, message: '请输入内容', trigger: 'change' }
          ],
        },
        dialogVisible:true,
         imageUrl: ''
     }
   },
   mounted(){
     //行 赋值给当前弹框
     console.log(this.DialogRow);
     this.ruleForm = {...this.DialogRow}
   },
   methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      closeDialog(){
        this.$emit('closeDia')
      },
      saveDiaog(){
        
        if(this.DialogType==0){
          this.$emit('saveDiaLog',this.ruleForm)
        }else{
          // alert('请修改')
          xiugaiFn(this.ruleForm).then(res=>{
            console.log(res);
            if(res.code==200){
              this.$emit('updateFn')
            }
          })
        }
      },
      // 弹出框
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 30px;
    line-height: 100px;
    text-align: center;
  }
  .el-form-item{
    width: 460px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>